<template>
    <view>
        <view class="list-filter">
            <view class="item" v-for="(item,index) in lists" @click="clickItem(index)" :key="index">
                <view class="text" :class="item.open && 'orc' ">{{item.title}}</view>
                <view class="icon">
                    <u-icon :name="item.open ? 'arrow-down':'arrow-up'" :color="item.open && '#f17d30'"
                            size="28rpx"></u-icon>
                </view>
            </view>
        </view>

        <!--<u-toast ref="uToast"/>-->
    </view>
</template>

<script>
    export default {
        name: "filter-bar",
        data() {
            return {
                lists: [
                    {
                        title: '租金',
                        open: true,
                    },
                    {
                        title: '租金2',
                        open: false
                    },
                    {
                        title: '租金3',
                        open: false
                    },
                    {
                        title: '租金4',
                        open: false
                    }
                ]
            };
        },
        methods: {
            clickItem(index) {
                for (let i = 0; i < this.lists.length; i++) {
                    if (i === index) {
                        this.lists[i].open = true;
                    }else{
                        this.lists[i].open = false;
                    }
                }

                // this.$refs.uToast.success(`点击了第${index}个`);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .list-filter {
        width: 100%;
        background-color: #FFFFFF;
        padding: 10rpx;
        margin: 10rpx;
        display: flex;
        justify-content: space-around;
        align-content: center;
    }

    .item {
        display: flex;
        align-content: center;
        border: 1 rpx solid red;
    }

    .text {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
    }

    .orc{
        color: #f17d30;
    }

    .item::before {
        vertical-align: middle;
    }

    .icon {
        margin: 8rpx;
    }
</style>